import React, { useEffect } from 'react';
import { Card, Radio, Typography, Row, Col } from 'antd';
import { useAnalysisStore } from '@/stores/analysisStore';
import { 
  LayoutOutlined, 
  AppstoreOutlined, 
  RocketOutlined, 
  BulbOutlined,
  ThunderboltOutlined,
  CloudOutlined,
  ExperimentOutlined,
  BoxPlotOutlined
} from '@ant-design/icons';
import styles from './index.module.less';

const { Title, Text } = Typography;

const styleOptions = [
  { 
    label: '现代简约', 
    value: 'modern',
    icon: <LayoutOutlined />,
    description: '简洁大方的设计风格，注重留白和排版',
    color: '#1890ff'
  },
  { 
    label: '商务风格', 
    value: 'business',
    icon: <AppstoreOutlined />,
    description: '专业稳重的商务风格，适合企业应用',
    color: '#52c41a'
  },
  { 
    label: '科技风格', 
    value: 'tech',
    icon: <RocketOutlined />,
    description: '充满科技感的设计，适合创新型产品',
    color: '#722ed1'
  },
  { 
    label: '创意风格', 
    value: 'creative',
    icon: <BulbOutlined />,
    description: '独特创意的设计风格，吸引眼球',
    color: '#fa8c16'
  },
  { 
    label: '极简风格', 
    value: 'minimal',
    icon: <BoxPlotOutlined />,
    description: '极简主义设计，专注核心功能和内容',
    color: '#eb2f96'
  },
  { 
    label: '未来风格', 
    value: 'futuristic',
    icon: <ThunderboltOutlined />,
    description: '前卫的未来科技风格，充满想象力',
    color: '#13c2c2'
  },
  { 
    label: '轻量风格', 
    value: 'light',
    icon: <CloudOutlined />,
    description: '轻盈通透的设计风格，清新自然',
    color: '#1677ff'
  },
  { 
    label: '实验风格', 
    value: 'experimental',
    icon: <ExperimentOutlined />,
    description: '大胆创新的实验性设计，突破传统',
    color: '#f5222d'
  },
];

// 添加更多样式选项，确保有足够的内容使滚动生效
const extraStyleOptions = [
  { 
    label: '复古风格', 
    value: 'retro',
    icon: <LayoutOutlined />,
    description: '怀旧复古的设计风格，带有历史感',
    color: '#faad14'
  },
  { 
    label: '自然风格', 
    value: 'nature',
    icon: <AppstoreOutlined />,
    description: '自然有机的设计风格，舒适和谐',
    color: '#73d13d'
  },
  { 
    label: '工业风格', 
    value: 'industrial',
    icon: <RocketOutlined />,
    description: '工业化设计风格，粗犷有力',
    color: '#8c8c8c'
  },
  { 
    label: '童趣风格', 
    value: 'playful',
    icon: <BulbOutlined />,
    description: '充满童趣的设计风格，活泼可爱',
    color: '#ff85c0'
  }
];

// 合并所有样式选项
const allStyleOptions = [...styleOptions, ...extraStyleOptions];

const SelectStyle: React.FC = () => {
  const { analysisResult, setAnalysisResult } = useAnalysisStore();
  
  // 确保滚动区域正确初始化
  useEffect(() => {
    const scrollContainer = document.getElementById('styleScrollContainer');
    if (scrollContainer) {
      // 强制重新计算滚动区域
      setTimeout(() => {
        scrollContainer.style.display = 'none';
        // 强制浏览器重新计算布局
        void scrollContainer.offsetHeight;
        scrollContainer.style.display = '';
      }, 100);
    }
  }, []);
  
  const handleStyleChange = (value: string) => {
    if (analysisResult) {
      setAnalysisResult({
        ...analysisResult,
        theme: value
      });
    }
  };

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <Title level={2}>选择组件风格</Title>
        <Text className={styles.subtitle}>
          选择一种风格，我们将根据您的选择生成相应风格的组件
        </Text>
      </div>
      
      <div className={styles.content}>
        <div className={styles.scrollableContainer} id="styleScrollContainer">
          <Row gutter={[24, 24]} className={styles.styleCards}>
            {allStyleOptions.map(option => (
              <Col xs={24} sm={12} md={12} lg={6} key={option.value}>
                <Card
                  hoverable
                  className={`${styles.styleCard} ${analysisResult?.theme === option.value ? styles.selected : ''}`}
                  onClick={() => handleStyleChange(option.value)}
                  style={{ borderColor: analysisResult?.theme === option.value ? option.color : 'transparent' }}
                >
                  <div 
                    className={styles.iconWrapper}
                    style={{ backgroundColor: option.color }}
                  >
                    {option.icon}
                  </div>
                  <div className={styles.styleInfo}>
                    <Title level={4}>{option.label}</Title>
                    <Text type="secondary">{option.description}</Text>
                  </div>
                  <div className={styles.radioWrapper}>
                    <Radio checked={analysisResult?.theme === option.value} />
                  </div>
                </Card>
              </Col>
            ))}
          </Row>
        </div>
      </div>
    </div>
  );
};

export default SelectStyle; 